<template>
  <div class="shopping">
    <div class="shopping-filter">
      <span style="margin-bottom:20px;">创建时间</span>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        range-separator="|"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <span>筛选条件</span>
      <el-select v-model="condition" clearable style="width:165px;" @change="handleFilter">
        <el-option
          v-for="item in conditions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div style="margin-top:20px;">
        <span>关键词</span>
        <el-select v-model="indentity" clearable style="width:165px;" @change="handleFilter">
          <el-option
            v-for="item in indentitys"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="content" style="width:200px" placeholder="请输入关键词搜索" @keyup.enter.native="handleFilter"/>
        <el-button type="primary" style="margin-left:10px;" plain @click="handleFilter">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        <el-button :loading="downloadLoading" type="primary" plain @click="handleExport">导出</el-button>
      </div>
    </div>
    <el-divider content-position="left">共{{ total }}条数据</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="userName" label="用户名" min-width="10" align="center"/>
      <el-table-column prop="distributorName" label="代理商名称" min-width="10" align="center"/>
      <el-table-column prop="sn" label="消费单号" min-width="10" align="center"/>
      <el-table-column prop="type" label="消费类型" min-width="10" align="center"/>
      <el-table-column prop="amount" label="消费价格" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="accountDetail(scope.row)">{{ scope.row.amount }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="tradeName" label="商品名称" min-width="10" align="center"/>
      <el-table-column prop="paidTime" label="消费时间" min-width="10" align="center"/>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
  import AccountDialog from '../userDialog'
  import Pagination from '@/components/Pagination'
  import {getConsumeRecord} from '@/api/distribution/agencydata'
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      AccountDialog,
      Pagination
    },
    data() {
      return {
        total: 0,
        currentpage: 1,
        pagesize: 10,
        downloadLoading: false,
        content: '',
        indentity: '',
        date: [],
        condition: '',
        conditions: [
          {
            label: '课程',
            value: 'course'
          },
          {
            label: '班级',
            value: 'classroom'
          },
          {
            label: '会员',
            value: 'member'
          }
        ],
        indentitys: [
          {
            label: '用户名',
            value: 'userName'
          },
          {
            label: '代理商名称',
            value: 'distributorName'
          },
          {
            label: '商品名称',
            value: 'tradeName'
          }
        ],
        accountDialog: {
          dialog: false,
          tableData: null
        },
        tableData: [],
        filterData: []
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        getConsumeRecord(getTenantId()).then(res => {
          this.tableData = res.data.items;
          this.filterData = res.data.items;
          this.total = res.data.items.length;
        })
      },
      accountDetail(val) {
        this.accountDialog.dialog = true;
        this.accountDialog.tableData = val
      },
      handleFilter() {
        this.tableData = this.filterData.filter(item => {
          if (this.date && (new Date(item.createTime) < this.date[0] || new Date(item.createTime) > this.date[1])) return false;
          if (this.condition && item.type !== this.condition) return false;
          if (this.indentity === 'userName' && item.userName.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false;
          if (this.indentity === 'distributorName' && item.distributorName.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false;
          if (this.indentity === 'tradeName' && item.tradeName.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false;
          return true
        });
        this.total = this.tableData.length
      },
      clearParams() {
        this.date = [];
        this.condition = '';
        this.indentity = '';
        this.content = '';
        this.getData()
      },
      handleExport() {
        this.downloadLoading = true;
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['用户名', '代理商名称', '消费单号', '消费类型', '消费价格', '商品名称', '消费时间'];
          const filterVal = ['userName', 'distributorName', 'sn', 'type', 'amount', 'tradeName', 'paidTime'];
          const list = this.tableData;
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'agencyManageList',
            autoWidth: true,
            bookType: 'xlsx'
          });
          this.downloadLoading = false
        })
      },
      handleSizeChange(val) {
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shopping {
    &-filter,
    &-keyword {
      width: 100%;
      font-size: 14px;
      color: #606266;
      margin: 15px 0;

      span {
        margin: 10px 0;
      }

      .keyword {
        display: inline-block;
        width: 56px;
        text-align: right;
      }
    }
  }
</style>
